import * as echarts from "echarts";
import { getUnit } from "./chartUtils";
import upImage from "./up.png";
import downImage from "./down.png";
const statistical: Array<{
  widget: string;
  option?: any;
}> = [
  {
    widget: "Echart",
    option: getOption(),
  },
  {
    widget: "RoseDiagram",
    option: { name: 12 },
  },
  {
    widget: "Echart",
    option: radar(),
  },
  {
    widget: "Pie3d",
  },
];
function radar({
  list = [
    { label: "应付账款", value: 100000, rate: 1 },
    { label: "货币资金", value: 70000, rate: 2 },
    { label: "应收账款", value: 80000, rate: -10 },
    { label: "存货", value: 120000, rate: 2 },
    { label: "固定资产净值", value: 55000, rate: 1 },
  ],
} = {}) {
  var map: Record<string, (typeof list)[0]> = {};
  const data = list.map((t) => {
    map[t.label] = t;
    return t.value;
  });
  const max = Math.max(...data, 0);
  return {
    color: ["#4AFEF9"],
    title: [getUnit()],

    radar: {
      // center: ['50%', '50%'],
      radius: "40%",
      axisNameGap: 15,

      axisName: {
        show: true,

        formatter: function (value: string) {
          if (value === "存货") {
            return [
              `{a|　 ${value}}\r\n`,
              `{b|　${map[value].value}}\r\n`,
              `{c|　同比：${map[value].rate}%} {${
                Number(map[value].rate) > 0 ? "f" : "d"
              }|}`,
            ];
          } else if (value === "应收账款") {
            return [
              `{a|${value}}　\r\n`,
              `{b|${map[value].value}}　\r\n`,
              `{c|同比：${map[value].rate}%} {${
                Number(map[value].rate) > 0 ? "f" : "d"
              }|}　`,
            ];
          }
          return [
            `{a|${value}}\r\n`,
            `{b|${map[value].value}}\r\n`,
            `{c|同比：${map[value].rate}%} {${
              Number(map[value].rate) > 0 ? "f" : "d"
            }|}`,
          ];
        },
        rich: {
          a: {
            color: "#fff",
            fontSize: 13,
          },
          b: {
            fontSize: 15,
            color: "#00fefe",
            lineHeight: 30,
          },
          c: {
            fontSize: 12,
            lineHeight: 12,
            color: "#ced9e3",
            verticalAlign: "top",
          },
          d: {
            lineHeight: 12,
            width: 10,
            height: 10,
            backgroundColor: {
              image: downImage,
            },
            verticalAlign: "top",
          },
          f: {
            lineHeight: 12,
            width: 10,
            height: 10,
            backgroundColor: {
              image: upImage,
            },
            verticalAlign: "top",
          },
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)",
        },
      },
      splitArea: {
        areaStyle: {
          color: "rgba(255, 255, 255, 0)",
        },
      },
      axisTick: {
        show: false,
      },
      // shape: 'circle',

      indicator: list.map((t) => ({ name: t.label, max })),
    },
    series: [
      {
        name: "资产",
        type: "radar",
        areaStyle: {
          opacity: 0.4,
        },

        data: [
          {
            value: list.map((t) => t.value),
            name: "资产",
          },
        ],
      },
    ],
  };
}
function getOption(
  data = [12, 58, 65, 87],
  xData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]
) {
  return {
    xAxis: {
      type: "category",
      data: xData,
      // x坐标轴为虚线
      axisLine: {
        lineStyle: {
          color: "rgba(11, 73, 125, 0.33)",
          opacity: 0.8,
        },
      },
      // 不展示下面｜
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: "#B0E1FF",
        fontSize: 12, // 字体大小
      },
    },
    yAxis: {
      type: "value",
      splitLine: {
        // 和y轴平行的线
        show: true,
        lineStyle: {
          type: "solid",
          color: "rgba(255, 255, 255, 0.3)",
        },
      },
      axisLabel: {
        show: true,
        color: "#B0E1FF",
        fontSize: 12, // 字体大小
      },
    },
    // 栅格
    grid: {
      left: "0",
      right: "0",
      bottom: "0%",
      top: "16px",
      containLabel: true,
    },
    series: [
      // 数据低下的圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [16, 8], // 宽，高
        symbolOffset: [0, 4], // 左 上
        z: 3,
        symbol: "diamond",
        itemStyle: {
          color: "#32D0CB",
        },
        data: data,
      },
      // 数据的柱状图
      {
        name: "",
        type: "bar",
        barWidth: 16, // 柱条的宽度，不设时自适应。
        barGap: "-100%", // 不同系列的柱间距离
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#235DFF", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#59ACF7", // 50% 处的颜色
              },
              {
                offset: 1,
                color: "#71CAFF", // 100% 处的颜色
              },
            ]);
          },
        },
        data: data,
      },
      // 数据顶部的样式
      {
        name: "",
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [16, 8],
        symbolOffset: [0, -4],
        z: 3,
        itemStyle: {
          color: "#32D0CB",
          label: {
            show: true, // 开启显示
            position: "top", // 在上方显示
            textStyle: {
              fontSize: "12",
              color: "#B0E1FF",
            },
          },
        },
        symbolPosition: "end",
        data: data,
      },
    ],
  };
}

export default statistical;
